<template>
	<view class="content">
		<u-navbar title="实名认证" :autoBack="true">
		</u-navbar>
		<view class="info">
			<view class="" style="font-size: 28rpx;color: #F05D5D;" v-if="status">
				失败原因：{{parterInfo.verify_fail_reason}}
			</view>
			<view class="c1">姓名</view>
			<view class="c2">
				<u--input v-model='form.realname' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>
			<view class="c1">身份证</view>
			<view class="c2">
				<u--input v-model='form.idcard_no' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>
			<view class="c1">身份证正面</view>

			<view class="card" @click="choose(0)">
				<view v-if="!showimg.idcard_front_image">
					<u-icon name="plus" size="20" color="#D8D8D8"></u-icon>
				</view>
				<image style="width: 100%;height: 100%;" class="id_img" v-else :src="showimg.idcard_front_image"
					mode="aspectFit"></image>
			</view>
			<view class="c1">身份证反面</view>
			<view class="card" @click="choose(1)">
				<view v-if="!showimg.idcard_back_image">
					<u-icon name="plus" size="20" color="#D8D8D8"></u-icon>
				</view>
				<image style="width: 100%;height: 100%;" class="id_img" v-else :src="showimg.idcard_back_image"
					mode="aspectFit"></image>
			</view>

		</view>

		<view class="but">
			<view class="s2" @click="onSend()">
				<text>点击认证</text>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		upload_api,
		submitRealInfo_api,
		partner_baseinfo_api
	} from '@/api/second.js'
	import conf from '@/common/config.js';
	export default {

		data() {
			return {
				form: {
					realname: '',
					idcard_no: '',
					idcard_front_image: '',
					idcard_back_image: '',
				},
				showimg: {
					idcard_front_image: '',
					idcard_back_image: ''
				},
				status: '',
				parterInfo: {},
				currentOS: false,
			};
		},
		onLoad({
			status
		}) {
			this.getOS();
			this.status = status
			status && this.getParterInfo()
		},
		onShow() {
			if (this.currentOS) {
				const data = uni.getStorageSync('authInfo')
				if (data) {
					this.form = data.form
					this.showimg = data.showimg
				}
			}
		},
		onUnload() {
			uni.removeStorageSync('authInfo')
		},
		methods: {
			getOS() {
				uni.getSystemInfo({
					success: (res) => {
						let OS = res.osName;
						this.currentOS = OS == 'ios' ? true : false;
					},
					fail: (fail) => {
						this.currentOS = false;
					}
				});
			},
			getParterInfo() {
				partner_baseinfo_api().then(res => {
					const {
						realname,
						idcard_back_image,
						idcard_front_image,
						idcard_no
					} = res.data
					this.parterInfo = res.data
					this.form = {
						realname,
						idcard_back_image,
						idcard_front_image,
						idcard_no
					}
					this.showimg = {
						idcard_front_image: conf.preview_url + idcard_front_image,
						idcard_back_image: conf.preview_url + idcard_back_image
					}
				})
			},
			choose(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						upload_api({
							filePath: res.tempFilePaths[0]
						}).then(res => {
							console.log(res);
							if (!type) {
								this.form.idcard_front_image = res.data.data.url
								this.showimg.idcard_front_image = res.data.data.fullurl
							} else {
								this.form.idcard_back_image = res.data.data.url
								this.showimg.idcard_back_image = res.data.data.fullurl
							}
							if (this.currentOS) {
								uni.setStorageSync('authInfo', {
									form: this.form,
									showimg: this.showimg,
								})
							}
						}).finally(() => {
							uni.hideLoading()
						})
					}
				});
			},
			getCode() {
				let that = this
				if (!this.vuex_user.mobile) {
					uni.$u.toast('请输入手机号');
					return false;
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$API.sendCode({
						mobile: this.vuex_user.mobile
					}).then(res => {
						uni.hideLoading();
						this.description = '短信验证码已发送至您的手机号码 ' + this.vuex_user.mobile + '，有效期至 60S';
						this.c4_show = true;
						this.$refs.uCode.start();
						setTimeout(function() {
							that.c4_show = false;
						}, 3000);
					}).catch(err => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			setCode(res) {
				this.vuex_user.code = res
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d; //年月日
				// return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
			},
			onGender(e) {
				console.log('e', e)
				this.vuex_user.gender = e.indexs[0]
				this.vuex_user.gender_text = e.value[0]
				this.gender_show = false;
			},
			onConfirmBirthday(e) {
				this.vuex_user.birthday = this.formatDate(e.value);
				this.birthday_show = false;
			},
			sendAvatar() {
				let that = this;
				let host_url = conf.url_config + '/api/common/upload';
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: host_url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Token: this.vuex_token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								that.vuex_user.avatar = data.data.fullurl;
								that.avatar = data.data.url;
							}
						});
					}
				});
			},
			sendImage() {
				let that = this;
				let host_url = conf.url_config + '/api/common/upload';
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: host_url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Token: this.vuex_token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								that.vuex_user.qrcode = data.data.fullurl;
								that.qrcode = data.data.url;
							}
						});
					}
				});
			},
			onClose() {
				this.gender_show = false;
				this.birthday_show = false;
			},
			onSend() {
				if (!this.form.realname) return this.$u.toast('请输入姓名')
				if (!this.form.idcard_no) return this.$u.toast('请输入身份证号')
				// if (!uni.$u.test.idCard(this.form.idcard_no)) return this.$u.toast('请输入正确身份证号')
				if (!this.form.idcard_front_image) return this.$u.toast('请上传你的身份证正面照片')
				if (!this.form.idcard_back_image) return this.$u.toast('请上传你的身份证反面照片')
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				submitRealInfo_api(this.form).then(res => {
					if (1 == res.code) {
						this.$u.toast(res.msg)
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/my/index',
								success: () => {
									uni.removeStorageSync('authInfo')
								}
							})
						}, 600)
					}
				}).finally(() => {
					uni.hideLoading()
				})

			}
		}
	}
</script>

<style lang="scss">
	.c3 {
		margin-top: 40rpx;
	}

	.tips {
		font-size: 28rpx;
		color: #7677EB;
	}

	.content {
		width: 670rpx;
		margin: 0 auto;
	}

	.info {
		width: 566rpx;
		padding: 52rpx;
		margin: 52rpx auto;
		background-color: #fff;
		border-radius: 48rpx;
		@include flex(column);

		.avatar {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.card {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(184, 200, 224, 0.2221);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 2rpx solid #D8E0F0;
			width: 100%;
			height: 294rpx;
			margin-top: 52rpx;
		}

		.c2 {
			width: 566rpx;
			margin-top: 40rpx;
			position: relative;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}

			.on_in {
				position: absolute;
				inset: 0;
			}
		}

		.qrcode {
			@include flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 128rpx;
				height: 128rpx;
				margin-top: 24rpx;
			}
		}

	}

	.but {
		@include flex;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			margin: 0 auto 50rpx;
			text-align: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
</style>s